<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发现 - 人才职业生涯规划平台</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="../css/discover.css">
</head>
<body>
    <div class="app-container">
        <!-- 头部导航 -->
        <header class="header">
            <h1 class="logo">发现</h1>
            <div class="search-bar">
                <i class="bi bi-search"></i>
                <input type="text" placeholder="搜索话题、文章、测评...">
            </div>
            <div class="user-info">
                <i class="bi bi-bell"></i>
                <div class="avatar"></div>
            </div>
        </header>

        <!-- 主内容区 -->
        <main class="main-content">
            <!-- 推荐轮播图 -->
            <section class="banner-slider">
                <div class="slider-container">
                    <div class="slider-item active">
                        <img src="https://t7.baidu.com/it/u=2621658848,3952322712&fm=193&f=GIF" alt="行业趋势分析">
                        <div class="slider-caption">
                            <h3>2023互联网行业人才趋势分析</h3>
                            <p>深度解读互联网行业最新人才需求与薪资走向</p>
                        </div>
                    </div>
                    <div class="slider-item">
                        <img src="https://img.51miz.com/Element/00/88/81/42/48a38f0f_E888142_15124635.jpg" alt="名企实习">
                        <div class="slider-caption">
                            <h3>名企暑期实习申请指南</h3>
                            <p>BAT、字节等头部企业实习机会及申请攻略</p>
                        </div>
                    </div>
                    <div class="slider-item">
                        <img src="https://img.51miz.com/Element/00/71/70/90/05f7aa8a_E717090_1346a32a.jpg" alt="简历优化">
                        <div class="slider-caption">
                            <h3>一页纸简历如何突出核心竞争力</h3>
                            <p>HR眼中的优质简历是什么样？</p>
                        </div>
                    </div>
                </div>
                <div class="slider-indicators">
                    <span class="indicator active"></span>
                    <span class="indicator"></span>
                    <span class="indicator"></span>
                </div>
            </section>

            <!-- 行业洞察 -->
            <section class="module insights">
                <div class="module-header">
                    <h2>行业洞察</h2>
                    <a href="article-list.html" class="more">查看更多 <i class="bi bi-chevron-right"></i></a>
                </div>
                <div class="article-list">
                    <div class="article-item" onclick="window.location.href='article-details.html'">
                        <div class="article-img">
                            <img src="https://img.zcool.cn/community/018fe35dfb4f8da80121416826220d.jpg" alt="AI行业趋势">
                        </div>
                        <div class="article-content">
                            <h3>AI产业发展现状与人才需求分析</h3>
                            <p class="article-desc">随着ChatGPT等大模型的兴起，AI人才需求激增...</p>
                            <div class="article-meta">
                                <span class="views"><i class="bi bi-eye"></i> 2.3k</span>
                                <span class="publish-time">2天前</span>
                            </div>
                        </div>
                    </div>
                    <div class="article-item" onclick="window.location.href='article-details.html'">
                        <div class="article-img">
                            <img src="https://img.51miz.com/Element/00/37/52/42/f0a4ef73_E375242_3b3be3ba.jpg" alt="金融行业趋势">
                        </div>
                        <div class="article-content">
                            <h3>金融科技创新与人才转型趋势</h3>
                            <p class="article-desc">传统金融机构数字化转型加速，复合型人才成为香饽饽...</p>
                            <div class="article-meta">
                                <span class="views"><i class="bi bi-eye"></i> 1.8k</span>
                                <span class="publish-time">3天前</span>
                            </div>
                        </div>
                    </div>
                    <div class="article-item" onclick="window.location.href='article-details.html'">
                        <div class="article-img">
                            <img src="https://img.51miz.com/Element/00/82/19/27/f6ff77d3_E821927_f80e3ae5.jpg" alt="新能源行业趋势">
                        </div>
                        <div class="article-content">
                            <h3>新能源产业人才需求与能力模型构建</h3>
                            <p class="article-desc">双碳目标下，新能源产业人才缺口剧增，复合技能成为关键...</p>
                            <div class="article-meta">
                                <span class="views"><i class="bi bi-eye"></i> 1.5k</span>
                                <span class="publish-time">4天前</span>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 求职干货 -->
            <section class="module job-tips">
                <div class="module-header">
                    <h2>求职干货</h2>
                    <a href="tips-list.html" class="more">更多干货 <i class="bi bi-chevron-right"></i></a>
                </div>
                <div class="tips-container">
                    <div class="tips-item">
                        <div class="tips-img">
                            <img src="https://img.51miz.com/Element/00/56/85/45/cee7c246_E568545_f2566c31.jpg" alt="简历技巧">
                            <span class="tips-category">简历优化</span>
                        </div>
                        <div class="tips-content">
                            <h3>如何在简历中突出项目经历</h3>
                            <p>项目经历是HR最关注的部分，如何把经历写得既真实又吸引人？</p>
                            <div class="tips-meta">
                                <span class="author">
                                    <img src="https://img.51miz.com/Element/00/88/06/33/d0b1ee05_E880633_47249617.jpg" alt="作者头像" class="author-avatar">
                                    <span>简历优化师Tom</span>
                                </span>
                                <span class="likes"><i class="bi bi-heart"></i> 328</span>
                            </div>
                        </div>
                    </div>
                    <div class="tips-item">
                        <div class="tips-img">
                            <img src="https://img.51miz.com/Element/00/88/05/90/a32d7c01_E880590_a8ad5f47.jpg" alt="面试技巧">
                            <span class="tips-category">面试技巧</span>
                        </div>
                        <div class="tips-content">
                            <h3>大厂面试常见问题及应对策略</h3>
                            <p>整理了BAT等大厂的高频面试问题，以及回答技巧与注意事项</p>
                            <div class="tips-meta">
                                <span class="author">
                                    <img src="https://img.51miz.com/Element/00/88/88/97/6232b80c_E888897_09fb9d12.jpg" alt="作者头像" class="author-avatar">
                                    <span>资深面试官李明</span>
                                </span>
                                <span class="likes"><i class="bi bi-heart"></i> 456</span>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </main>

        <!-- 底部导航栏 -->
        <footer class="tab-bar">
            <div class="tab-item">
                <i class="bi bi-house-door"></i>
                <span>首页</span>
            </div>
            <div class="tab-item active">
                <i class="bi bi-compass-fill"></i>
                <span>发现</span>
            </div>
            <div class="tab-item">
                <i class="bi bi-person-badge"></i>
                <span>经纪人</span>
            </div>
            <div class="tab-item">
                <i class="bi bi-person"></i>
                <span>我的</span>
            </div>
        </footer>
    </div>

    <script src="../js/main.js"></script>
    <script src="../js/discover.js"></script>
    <script src="../js/nav.js"></script>
</body>
</html> 